<!doctype html>
<script src="/node_modules/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>Check End Position of scrollIntoView of shadow elements</title>
<div id="container">
  <div
    id="space1"
    style="height: 2000px; width: 2000px; background-color: yellow"
  ></div>
  <div id="shadow"></div>
  <div
    id="space2"
    style="height: 2000px; width: 2000px; background-color: blue"
  ></div>
</div>
<script>
  add_completion_callback(() => document.getElementById('container').remove())

  test((t) => {
    var shadow = document.getElementById('shadow')
    var shadowRoot = shadow.attachShadow({ mode: 'open' })
    var shadowDiv = document.createElement('div')
    shadowDiv.style.height = '200px'
    shadowDiv.style.width = '200px'
    shadowDiv.style.backgroundColor = 'green'
    shadowRoot.appendChild(shadowDiv)

    window.scrollTo(0, 0)
    var expected_x = shadowDiv.offsetLeft
    var expected_y = shadowDiv.offsetTop
    assert_not_equals(window.scrollX, expected_x)
    assert_not_equals(window.scrollY, expected_y)
    scrollIntoView(shadowDiv, { block: 'start', inline: 'start' })
    assert_approx_equals(window.scrollX, expected_x, 1)
    assert_approx_equals(window.scrollY, expected_y, 1)
  }, 'scrollIntoView should behave correctly if applies to shadow dom elements')
</script>
